<template>
    <div class="container">
        <img :src="imgUrl" alt="" class="img">
        <div class="read">
            <div class="title white" :style="mystyle">{{title}}</div>
            <div :style="mystyle" class="tips white">{{auth}}</div>
            <div class="content white" :style="mystyle" v-html="content"></div>
        </div>
        <span type="primary" @click="showDrawer" class="drawbtn">
            点
        </span>
        <a-drawer
        title="藏之出品"
        width=300
        :placement="placement"
        :closable="false"
        :visible="visible"
        @close="onClose"
        :headerStyle='headerStyle'
        >
        <p>
            <span>背景选择:</span>
            <a-select default-value="面朝大海" style="width: 120px;margin-left:10px" @change="handleChange">
                <a-select-option v-for="item in option" :key="item.value">
                {{item.title}}
                </a-select-option>
            </a-select>
        </p>
        <p>
            <span>字体颜色:</span>
            <a-select default-value="朱鹭白" style="width: 120px;margin-left:10px" @change="handleChange2">
                <a-select-option v-for="item in option2" :key="item.value">
                {{item.title}}
                </a-select-option>
            </a-select>
        </p>
        <p>
            <span>字体大小:</span>
            <a-slider id="test" :default-value="14" :min="12" :max="24" @change="handle" />
        </p>
        <p>
            <a-button type="primary" @click="read" class="btn">
            文章切换
            </a-button>
        </p>
        <p class="music">
            <iframe frameborder="no" id="m" border="0" marginwidth="0" marginheight="0" width=299 height=350 src="https://music.163.com/outchain/player?type=0&id=6655922260&auto=1&height=430"></iframe>
        </p>
        </a-drawer>
        
    </div>
</template>

<script>
    import http from '@/http/request.js';
    import api from '@/http/api.js';
    export default {
        data() {
            return {
                title:'',
                auth:'',
                visible: false,
                placement: 'left',
                mystyle:{
                    fontSize:'14px',
                    color:'#fff'
                },
                "content": "<p>想到这件难忘的事，忽然联想到“最后的晚餐”这幅名画的名字，不过对我来说，那一次难忘的晚餐不是最后的，而是最初的一次，这就是我平生第一次陪外国人共进的晚餐。</p><p>那时候我30出头，在公社学大寨正学得忙活。有一天接到省文艺创作研究室的电话，通知我去参加接待一个日本文化访华团。接到电话的最初一瞬就愣住了，我的第一反应是我穿什么衣服呀?我便毫不犹豫地推辞，说我在乡村学大寨的工作多么多么忙。回答说接待人名单是省革委会定的，这是“政治任务”必须完成。这就意味着不许推辞更不许含糊。</p><p>我能进入那个接待作陪的名单，是因为我在《陕西文艺》上刚刚发表过两个短篇小说，都是注释演绎“阶级斗争”这个“纲”的，而且是被认为演绎注释得不错的。接待作陪的人员组成考虑到方方面面，大学革委会主任、革命演员、革命工程师等，我也算革命的工农兵业余作者。陕西最具影响的几位作家几棵大树都被整垮了，我怎么也清楚我是猴子称王的被列入……</p><p>最紧迫的事便是衣服问题。我身上穿的和包袱里包的外衣和衬衣，几乎找不到一件不打补钉的，连袜子也不例外。我那时工资39元，连我在内养活着一个5口之家，添一件新衣服大约两年才能做到。为接待外宾而添一件新衣造成家庭经济的失衡，太划不来了。我很快拿定主意，借。</p><p>借衣服的对象第一个便瞄中了李旭升。他和我同龄，个头高低身材粗细也都差不多。他的人样俊气且不论，平时穿戴比较讲究，我几乎没见过他衣帽邋遢的时候。他的衣服质料质料也总是高一档，应该说他的衣着代表着70年代中期我们那个公社地区的最高水平。“四清”运动时，工作组对他在经济问题上的怀疑首先是由他的穿着诱发的，不贪污公款怎么能穿这么阔气的衣服?我借了一件半新的上装和裤子，虽然有点褪色却很平整，大约是哔叽料吧我已记不清了。衬衣没有借，我的衬衣上的补钉是看不见的。</p><p>我带着这一套行头回到驻队的村子。我的三个组员经过一番认真地审查，还是觉得太旧了点，而且再三点示我这不是个人问题，是一个“政治影响”问题，影响国家声誉的问题……其中一位老大姐第二天从家里带来了她丈夫的一套黄呢军装，硬要我穿上试试。结果连她自己也失望地摇头了，因为那套属于将军或校官的黄呢军装整个把我装饰得面目全非了，或者是我的老百姓的涣散气性把这套军装搞得不伦不类了。我最后只选用了她丈夫的一双皮鞋，稍微小了点但可以凑合。</p><p>第二天中午搭郊区公共车进西安，先到作家协会等候指令。《陕西文艺》副主编贺抒玉见了，又是从头到脚的一番审视，和我的那三位工作组员英雄所见一致：太旧。我没有好意思说透，就这旧衣服还是借来的。她也点示我不能马虎穿戴，这不是个人问题而是“国家影响政治影响”的大事。我从那时候直到现在都为这一点感动，大家都首先考虑国家面子。老贺随即从家里取来李若冰的蓝呢上衣，我换上以后倒很合身。老贺说很好，其他几位编辑都说好，说我整个儿都气派了。</p><p>接待作陪的事已经淡忘模糊了，外宾是些什么人也早已忘记，只记得有一位女作家，中年人，大约长我10岁。我第一眼瞧见她首先看见的是那红嘴唇。她挨我坐着，我总是由不得看她的红嘴唇，那么红啊!我竟然暗暗替她操心，如果她单个走在街上，会不会被红卫兵逮住像剪烫发砍高跟鞋一样把她的红嘴唇给割了削了?</p><p>那顿晚餐散席之后我累极了，比学大寨拉车挑担还累。</p><p>现在，因为工作的关系我常常接待外宾并作陪吃饭，自然不再为一件衣服而惶慌奔走告借了；再说，国家的面子也不需要一个公民靠借来的衣服去撑持了；还有，我也不会为那位日本女作家的红嘴被割削而操心担忧了，因为中国城市女人的红嘴唇已经灿若云霞红如海洋了。</p>",
                imgUrl:require("../../../static/0.jpg"),
                option:[
                    {
                        value:0,
                        title:'面朝大海',
                        label:'#fff',
                    },
                    {
                        value:1,
                        title:'花上枝头',
                        label:'#2c3e50',
                    },
                    {
                        value:2,
                        title:'简单朴素',
                        color:'#2c3e50',
                    },
                    {
                        value:3,
                        title:'绿意盎然',
                        color:'#2c3e50',
                    },
                    {
                        value:4,
                        title:'云端天堂',
                        color:'#2c3e50',
                    },
                    {
                        value:5,
                        title:'风恬浪静',
                        color:'#2c3e50',
                    },
                    {
                        value:6,
                        title:'校园青春',
                        color:'#2c3e50',
                    },
                    {
                        value:7,
                        title:'雾里看花',
                        color:'#2c3e50',
                    },
                    {
                        value:8,
                        title:'青梅竹马',
                        color:'#2c3e50',
                    },
                    {
                        value:9,
                        title:'日落山海',
                        color:'#2c3e50',
                    }
                ],
                option2:[{
                    title:'天青色',
                    value:'#2c3e50',
                },
                {
                    title:'朱鹭白',
                    value:'#fff',
                },
                {
                    title:'火山红',
                    value:'#e63946',
                },
                {
                    title:'瀚海蓝',
                    value:'#457b9d',
                },
                {
                    title:'暗夜绿',
                    value:'#81b29a',
                },
                {
                    title:'藏之紫',
                    value:'#3d405b',
                }
                ],
                headerStyle:{
                    // background:"grey"
                }
            };
        },
        watch: {
           
        },
        created(){
            this.showbook()
            // let urlTemp = "assets/imgs/0.jpg";
            // this.imgUrl = require("@/"+urlTemp)
        },
        methods: {
           showDrawer() {
            this.visible = true;
            },
            onClose() {
            this.visible = false;
            },
            onChange(e) {
            this.placement = e.target.value;
            },
            handle(value){
                console.log(value)
                  this.mystyle.fontSize= `${value}px`
            },
            handleChange(value,label){
                console.log(label)
                this.imgUrl = require(`../../../static/${value}.jpg`)
                if(value==0){
                    this.mystyle.color= '#fff'
                }else{
                     this.mystyle.color= '#2c3e50'
                }
            },
            handleChange2(value,label){
                this.mystyle = {
                        color:value
                    }
            },
            read(){
                this.showbook()
            },
            async showbook(){
                let data = {}
                await http.requestGet(data, api.apiRadom).
                then(res=>{
                    console.log(res)
                    if(res.data){
                        this.title = res.data.title
                        this.auth = res.data.author
                        this.content = res.data.content
                    }
                })
            }
        },
    }
</script>

<style lang="less" scoped>
.drawbtn{
    position: fixed;
    bottom:5rem;
    width:2rem;
    height:2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color:#fff;
    line-height: 2rem;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    left: 0.5rem;
}
.container{
    width: 100vw;
    // padding:1rem;
    .img{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .read{
        width: 100%;
        height: 96vh;
        overflow: auto;
        position: absolute;
        padding: 1.5rem;
        margin: 2vh 0;
        .title{
            font-size: 24px;
            font-weight: bold;
        }
        .tips{
            font-size: 20px;
        }
        .content{
             padding:1.5rem 0;
        }
    }
}
.white{
    color: #fff;
}
.music{
    position: absolute;
     left: 0;
    #m{
        position: absolute;
        left: 0;
    }
}
</style>